const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const CleanWebpackPlugin = require('clean-webpack-plugin');
const autoprefixer = require('autoprefixer');
const precss = require('precss');
const defineVars = {
	__DEV__: true,
	__DEV_TOOLS__: true,
};
const PATHS = {
	node_modules: path.join(__dirname, 'node_modules')
};

const plugins = [
	// new CleanWebpackPlugin(['development', 'product'], {
	// 	root: path.resolve('./assets/dist'),
	// 	verbose: true,
	// 	dry: false
	// }),
	// 分离代码
	// extract inline css into separate 'style.css'
	new ExtractTextPlugin('[name].style.css', {
		disable: false,
		allChunks: true
	}),
	// 共享代码
	new webpack.optimize.CommonsChunkPlugin( /* chunkName= */ 'vendor', /* filename= */ 'vendor.js'),
	new webpack.HotModuleReplacementPlugin(),
	new webpack.NoErrorsPlugin(),
	new webpack.DefinePlugin(defineVars),
	// new webpack.ProvidePlugin({
	// 		'fetch': 'imports?this=>global!exports?global.fetch!isomorphic-fetch'
	// }),
	// 根据模板插入css/js等生成最终HTML
	new HtmlWebpackPlugin({
		title: '教研盒子',
		filename: 'app.html',
		template: './client/templates/app.html',
		inject: true,
		hash: true, // 开启掉追加哈希的行为
		minify: {
			removeComments: false,
			collapseWhitespace: false
		}
	})
];

module.exports = {
	// configuration
	entry: {
		'app': [
			'webpack-hot-middleware/client',
			'./client/app.js'
		],
		vendor: ['Base64', 'babel-polyfill', 'react', 'echarts']
	},
	output: {
		path: path.join(__dirname, 'assets/dist/development'),
		filename: "[name].bundle.js",
		chunkFilename: "[id].bundle.js",
		publicPath: "/static/"
	},
	// devtool: "cheap-module-eval-source-map",
	devtool: "source-map",
	stats: {
		// Configure the console output
		colors: true,
		modules: true,
		reasons: true
	},
	module: {
		loaders: [{
				test: /\.js[x]?$/,
				include: __dirname,
				exclude: [
					path.resolve(__dirname, 'node_modules')
				],
				loader: 'babel'
			},
			// Less/css代码
			{
				test: /\.less|\.css$/,
				exclude: [
					path.resolve(__dirname, 'node_modules')
				],
				// modules 模块化，可以在样式中composes: className. 然后less已经解决了这个问题
				// minimize 最小化
				// sourceMap 源文件隐射
				loader: ExtractTextPlugin.extract("style-loader", "css-loader?modules&sourceMap!postcss-loader!less-loader?sourceMap")
			}, {
				test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
				loader: 'url?limit=10000&minetype=application/font-woff'
			}, {
				test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
				loader: 'url?limit=10000&minetype=application/font-woff'
			}, {
				test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
				loader: 'url?limit=10000&minetype=application/octet-stream'
			}, {
				test: /\.ijmap(\?v=\d+\.\d+\.\d+)?$/,
				loader: 'url?limit=10000&minetype=application/font-woff'
			}, {
				test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
				loader: 'file'
			}, {
				test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
				loader: 'url?limit=10000&minetype=image/svg+xml'
			}, {
				test: /\.(jpe?g|png|gif|svg)$/i,
				loaders: [
					'file?hash=sha512&digest=hex&name=[hash].[ext]',
					'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
				]
			}
		]
	},
	postcss: function() {
		return [autoprefixer, precss];
	},
	progress: true,
	keepalive: true,
	externals: {
		// 使用CDN将react系套件全局化, 需要在html模板页加上script src引用
		//'react': 'React',
		//'react-dom': 'ReactDOM'
	},
	resolve: {
		extensions: ['', '.js', '.jsx'],
		alias: {
			// 'shim': 'es5-shim/es5-shim.min.js',
			// 'sham': 'es5-shim/es5-sham.min.js',
			// 'babel-polyfill': 'babel-polyfill/dist/polyfill.min.js',
			// 'avalon': path.resolve(path.join(__dirname, "./vendor/avalon.js"))
			// 'moment': 'moment/min/moment-with-locales.min.js'
			// 'echarts': path.resolve(PATHS.node_modules, 'echarts/dist/echarts.min.js'),
			'react': path.resolve(PATHS.node_modules, 'react/react.js'),
			'react-dom': path.resolve(PATHS.node_modules, 'react-dom/dist/react-dom.js'),
			'react-redux': path.resolve(PATHS.node_modules, 'react-redux/dist/react-redux.js'),
			'react-router': path.resolve(PATHS.node_modules, 'react-router/lib/index.js'),
			'redux': path.resolve(PATHS.node_modules, 'redux/dist/redux.js')
		}
	},
	plugins: plugins,
	watchOptions: {
		aggregateTimeout: 500, // default 300ms
		poll: true
	}
};